<template>
<el-col :xl="8" :lg="12" :md="24" :sm="24" :xs="24">
  <el-form :model="wxForm" :rules="rules" ref="wxForm" class="wxForm" label-width="140px" size="small">
    <el-form-item label="appid" prop="appid">
      <el-input v-model="wxForm.appid"></el-input>
    </el-form-item>
    <el-form-item label="secret" prop="secret">
      <el-input v-model="wxForm.secret"></el-input>
    </el-form-item>
    <el-form-item label="merchant_id" prop="merchant_id">
      <el-input v-model="wxForm.merchant_id"></el-input>
    </el-form-item>
    <el-form-item label="notify_url" prop="notify_url">
      <el-input v-model="wxForm.notify_url"></el-input>
    </el-form-item>
    <el-form-item label="key" prop="key">
      <el-input v-model="wxForm.key"></el-input>
    </el-form-item>
    <el-form-item label="证书文件apiclient_cert" prop="apiclient_cert">
      <el-input type="textarea" :rows="5" v-model="wxForm.apiclient_cert"></el-input>
    </el-form-item>
    <el-form-item label="密钥文件apiclient_key" prop="apiclient_key">
      <el-input type="textarea" :rows="5" v-model="wxForm.apiclient_key"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" class="fr mt20" @click="submit">确认保存</el-button>
    </el-form-item>
  </el-form>
</el-col>
</template>

<script>
import { wechatAdd, wechat } from '@/api/setting'

export default {
  data() {
    const validateIsUndefined = (rule, value, callback) => {
      if (value === '' || value === undefined || value === null) {
        callback(new Error('不能为空哟~'))
      } else {
        callback()
      }
    }
    return {
      wxForm: {
        appid: '',
        secret: '',
        merchant_id: '',
        notify_url: '',
        key: '',
        apiclient_key: '',
        apiclient_cert: ''
      },
      rules: {
        appid: [{ required: true, trigger: 'blur', validator: validateIsUndefined }],
        secret: [{ required: true, trigger: 'blur', validator: validateIsUndefined }],
        merchant_id: [{ required: true, trigger: 'blur', validator: validateIsUndefined }],
        notify_url: [{ required: true, trigger: 'blur', validator: validateIsUndefined }],
        key: [{ required: true, trigger: 'blur', validator: validateIsUndefined }],
        apiclient_key: [{ required: true, trigger: 'change', message: '必须上传哟~' }],
        apiclient_cert: [{ required: true, trigger: 'change', message: '必须上传哟~' }]
      }
    }
  },
  methods: {
    submit() {
      this.$refs['wxForm'].validate((valid) => {
        if (valid) {
          wechatAdd(this.wxForm).then(response => {
            if (response.data.errorCode === 0) {
              this.$message.success(response.data.errorMsg)
            } else {
              this.$message.error(response.data.errorMsg)
            }
          })
        } else {
          this.$message.error('表单格式有误哟~')
        }
      })
    }
  },
  created() {
    wechat().then(response => {
      this.wxForm.appid = response.data.result.app_id
      this.wxForm.apiclient_cert = response.data.result.apiclient_cert
      this.wxForm.key = response.data.result.key
      this.wxForm.apiclient_key = response.data.result.apiclient_key
      this.wxForm.merchant_id = response.data.result.merchant_id
      this.wxForm.notify_url = response.data.result.notify_url
      this.wxForm.secret = response.data.result.secret
    })
  }
}
</script>